

import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'


const Charts: React.FC<{
  id: string;
  options: {[key: string]: unknown};
  height: string | number
}> = (props) => {

  const { id, options, height } = props;
  console.log('id', id);

  const echartRef = useRef<echarts.EChartsType>(null)


  useEffect(() => {
    // 初始化echart实例
    echartRef.current = echarts.init(document.getElementById(id))
  }, [id])

  useEffect(() => {
    echartRef.current?.setOption(options)
  }, [options])

  return (
    <div id={id} style={{ height, width: '100%' }}></div>
  )
}


export default Charts;